<template>
  <div class="bg-white rounded-lg shadow-sm p-6 mb-6 resume-section relative">
    <div class="flex justify-between items-start mb-6">
      <h2 class="text-xl font-semibold text-gray-800">教育背景</h2>
      <button v-if="!editMode" class="edit-btn p-2 rounded-full hover:bg-gray-100 opacity-0 group-hover:opacity-100">
        <i class="ri-pencil-line text-gray-500"></i>
      </button>
    </div>
    
    <div class="space-y-6">
      <div v-for="(education, index) in educationList" :key="index" class="flex">
        <div class="w-16 h-16 bg-blue-50 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
          <i class="ri-building-4-line text-blue-500 text-2xl"></i>
        </div>
        <div class="flex-1">
          <div class="flex justify-between items-start">
            <div>
              <h3 v-if="!editMode" class="font-medium text-gray-800">{{ education.school }}</h3>
              <input v-else v-model="education.school" type="text" class="font-medium text-gray-800 bg-transparent border-b border-gray-300 focus:border-primary outline-none">
              
              <div v-if="!editMode" class="text-gray-600 mt-1">{{ education.degree }}</div>
              <input v-else v-model="education.degree" type="text" class="text-gray-600 mt-1 bg-transparent border-b border-gray-300 focus:border-primary outline-none">
            </div>
            <div v-if="!editMode" class="text-gray-500">{{ education.period }}</div>
            <input v-else v-model="education.period" type="text" class="text-gray-500 bg-transparent border-b border-gray-300 focus:border-primary outline-none">
          </div>
          <div class="mt-2 text-gray-600">
            <p v-if="!editMode">{{ education.description }}</p>
            <textarea v-else v-model="education.description" class="w-full bg-transparent border border-gray-300 rounded p-2 focus:border-primary outline-none"></textarea>
          </div>
        </div>
      </div>
      
      <button v-if="editMode" @click="addEducation" class="w-full py-2 border border-dashed rounded-lg text-gray-500 hover:border-primary hover:text-primary">
        <i class="ri-add-line mr-1"></i>添加教育经历
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  editMode: boolean
}

defineProps<Props>()

const educationList = ref([
  {
    school: '上海交通大学',
    degree: '工商管理硕士',
    period: '2017.09 - 2020.06',
    description: '主修课程：市场营销、管理学、财务管理、组织行为学、战略管理\nGPA: 3.8/4.0，获得校级优秀毕业生'
  },
  {
    school: '华东师范大学',
    degree: '市场营销 本科',
    period: '2013.09 - 2017.06',
    description: '主修课程：市场调研、消费者行为学、广告学、品牌管理\n获得校级三好学生，参与多个市场营销实践项目'
  }
])

const addEducation = () => {
  educationList.value.push({
    school: '',
    degree: '',
    period: '',
    description: ''
  })
}
</script>
